<template>
  <div class="order" v-if="buyListInfo">
    <div class="bc"></div>
    <nav-bar>
      <template v-slot:left>
        <div class="left" @click="goBack">
          <img src="~assets/img/profile/left.png" alt="" />
        </div>
      </template>
      <template v-slot:center>确认订单</template>
    </nav-bar>
    <div class="head"><span>1.确认信息 </span><span>2.完成支付</span></div>
    <div class="main">
      <div class="item" v-for="item in buyListInfo" :key="item.iid">
        <div class="info">
          <img :src="item.image" alt="" />
          <div class="content">
            <div class="title">
              <span>{{ item.title }}</span>
            </div>
            <div class="price">
              <span class="price-price">￥{{ item.price }}单价)</span>
              <span class="price-count"
                >×{{ item.count ? item.count : "1" }}(数量) =</span
              >
              <span class="price-totalPrice">{{
                parseFloat(
                  parseFloat(item.price) * (item.count ? item.count : 1)
                ).toFixed(2)
              }}</span>
            </div>
          </div>
        </div>
        <div class="other">
          <ul>
            <li><span>配送时间:</span>1~3天以内发货</li>
            <li><span>运险费: </span>卖家赠送,退换货可赔</li>
            <li>
              <span>订单备注</span>
              <input type="text" placeholder="选填" />
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="foot">
      <div class="count">共{{ buyListInfo.length }}件</div>
      <div class="money">
        {{ totalMoney }}
      </div>
      <div class="btn">提交订单</div>
    </div>
  </div>
</template>

<script>
import NavBar from "@/components/common/navbar/NavBar";
export default {
  name: "Order",
  components: {
    NavBar,
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
  },

  computed: {
    totalMoney() {
      let money = 0;
      let count = 0;
      this.buyListInfo.forEach((value) => {
        if (value.count) {
          count = value.count;
        } else {
          count = 1;
        }
        money += parseFloat(value.price) * count;
      });
      return money.toFixed(2);
    },
    buyListInfo() {
      return this.$store.state.buyList;
    },
  },
};
</script>

<style scoped>
.bc {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #f5f3f3;
  z-index: -1;
}
.order {
  background-color: #f5f3f3;
  padding-bottom: 60px;
}
.head {
  padding: 15px 0 15px 30px;
  font-size: 13px;
  background-color: var(--color-tint);
  margin: 0 10px;
  color: #f3f1f1;
  border-radius: 5px;
}
.head span {
  padding: 0 10px;
}
.item {
  display: flex;
  background-color: #ffffff;
  margin: 10px;
  flex-direction: column;
  padding: 15px 0;
  border-radius: 8px;
}
.item .info {
  display: flex;
}
.item img {
  width: 60px;
  border-radius: 4px;
}
.content {
  display: flex;
  flex-direction: column;
}
.title {
  padding: 0 10px;
  font-size: 14px;
  overflow: hidden;
  height: 60px;
  text-overflow: ellipsis;
}
.price {
  height: 30px;
  padding-left: 10px;
  font-size: 24px;
  line-height: 30px;
  color: var(--color-high-text);
}
.price-price {
  font-size: 12px;
  color: #333;
}
.price-count {
  font-size: 13px;
  color: #333;
}
.other {
  padding-top: 10px;
}
.other li {
  margin: 30px 30px;
  font-size: 16px;
}
.other li span {
  display: inline-block;
  margin-right: 10px;
  width: 70px;
}
input {
  width: 200px;
}
.foot {
  position: fixed;
  height: 48px;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #ffffff;
  z-index: 11;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.foot .btn {
  background-color: var(--color-tint);
  color: #ffffff;
  height: 48px;
  width: 85px;
  line-height: 48px;
  text-align: center;
  border-radius: 3px;
  font-size: 14px;
}
.foot .money {
  color: var(--color-tint);
  font-size: 14px;
  padding: 0 10px;
}
</style>
